<template>
  <dv-border-box11 class="box" title="业务统计" :title-width="400" :animate="false" style="width: 100%; height: 400px">
    <dv-charts :option="option" style="width: 100%; height: 400px" />
  </dv-border-box11>
</template>

<script setup>
import { ref } from "vue";

const option = ref({
  color: ["#ffdb5c", "#fb7293", "#9fe6b8"],
  xAxis: {
    data: ["A", "B", "C", "D", "E", "F"],
    axisLabel: {
      style: {
        fill: "#fff",
        fontSize: 16,
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff",
      },
    },
    axisTick: {
      //坐标轴刻度线配置
      style: {
        stroke: "#fff",
      },
    },
  },
  yAxis: {
    data: "value",
    min: 50,
    max: 300,
    axisLabel: {
      style: {
        fill: "#fff",
        fontSize: 16,
      },
    },
    axisLine: {
      //坐标轴配置
      style: {
        stroke: "#fff",
      },
    },
    splitLine: {
      //分割线配置
      show: false,
    },
  },
  legend: {
    //图例
    data: ["社会保障局", "住房公积金", "市民中心", "人力资源", "卫计委", "综合执法局"],
    top: 60, //图例 标签上边距
    orient: "vertical", // 图例标签方向
    textStyle: {
      fill: "#fff",
    },
  },
  series: [
    //图表中的数据系列
    {
      name: "社会保障局",
      data: [160, 77, 106, 120, 209, 155],
      type: "line",
    },
    {
      name: "住房公积金",
      data: [160, 177, 106, 90, 209, 155],
      type: "line",
    },
    {
      name: "市民中心",
      data: [100, 87, 106, 90, 209, 155],
      type: "line",
    },
    {
      name: "人力资源",
      data: [110, 77, 106, 90, 209, 135],
      type: "line",
    },
    {
      name: "卫计委",
      data: [140, 57, 106, 90, 209, 125],
      type: "line",
    },
    {
      name: "综合执法局",
      data: [260, 107, 106, 90, 209, 105],
      type: "line",
    },
  ],
});
</script>

<style lang="scss" scoped></style>
